<template>
  <div class="bg-wrap flex align-center justify-center">
    <div class="login-wrap">
      <div class="left">
        <div class="head flex flex-column align-center justify-center pt-4">
          <img src="@assets/images/logo.png" width="60" />
          <h3 class="text-content-color font-md">
            EC2: Live eCommerce + Chatbot
          </h3>
        </div>

        <div class="myform px-4 pt-3">
          <el-form ref="formRef" :rules="rules" :model="form" label-width="0px">
            <el-form-item class="lang">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ currentLan }}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="lang in langs" :command="lang">{{lang.text}}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-form-item>
            <el-form-item prop="user_id">
              <el-input
                class="input"
                :prefix-icon="User"
                :placeholder="$t('sign.user')"
                v-model="form.user_id"
                name="user_id"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                class="input"
                :prefix-icon="Lock"
                :placeholder="$t('sign.password')"
                v-model="form.password"
                name="password"
                type="password"
              />
            </el-form-item>
            <el-form-item prop="code">
              <el-col :span="16">
                <el-input
                  class="input"
                  :prefix-icon="CircleCheck"
                  :placeholder="$t('sign.code')"
                  v-model="form.code"
                  style="width: 100%"
                  name="code"
                />
              </el-col>
              <el-col :span="8" style="text-align: right">
                <img
                  style="height: 30px"
                  src="https://ec2.full2house.com/Ent/index.php?a=Login&m=verify&t=1704630548019"
                />
              </el-col>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="checked" :label="$t('sign.remember')" size="small" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btn" @click="signin(formRef)"
                >{{$t('sign.signIn')}}</el-button
              >
            </el-form-item>
          </el-form>
          <div class="text-right">
            <el-link target="_blank">{{$t('sign.signUp')}}</el-link>
          </div>

          <div class="mt-5">
            <el-divider>
              <img src="@assets/images/fb.png" width="35px" alt="" />
            </el-divider>
            <div class="text-light-color text-center font-sm">
              Continue with Facebook
            </div>
          </div>
        </div>
        <div class="foot flex flex-column align-center justify-center">
          <div class="mb">
            <el-link
              href="https://www.full2house.com/privacy.html"
              target="_blank"
              >{{$t('sign.privacy')}}</el-link
            >
            <el-divider direction="vertical" />
            <el-link
              href="https://www.full2house.com/termsofservice.html"
              target="_blank"
              >{{$t('sign.terms')}}</el-link
            >
          </div>
          <div class="font-sm text-content-color">
            {{$t('sign.rights')}}
          </div>
        </div>
      </div>
      <div class="right">
        <img src="@assets/images/default.jpg" width="100%" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref,onMounted } from "vue";
import { $login } from "@api/singin";
import { $getDictionary } from "@api/common";
import type { FormInstance, FormRules } from "element-plus";
import { User, Lock, ArrowDown, CircleCheck } from "@element-plus/icons-vue";
import router from "@/router";
import { langs } from "@/locales/index.ts";
import { useLocaleStore } from "@/store/locales";
//console.log(locale.value);



const useLocale = useLocaleStore();
let langkey = useLocale.locale;
console.log(langkey);
let currentLan = ref("")
let checked = ref(false)
currentLan.value = langs.find((cur) => cur.value === langkey)?.text || ""

interface RuleForm {
  user_id: string;
  password: string;
  code: string;
}

//定义一个ref对象绑定
const formRef = ref<FormInstance>();

const form = reactive<RuleForm>({
  user_id: "Hello",
  password: "111111",
  code: "222",
  lang:langkey
});

const rules = reactive<FormRules<RuleForm>>({
  user_id: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
    {
      min: 3,
      max: 20,
      message: "Length should be 3 to 20",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: "Length should be 6 to 20",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
  ],
});

const signin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      getDictionary();
      // let res = await $login(form);
      // console.log(res);
      // if (res.code == 0) {
      //   console.log(res.data);
      //   useLocale.setAuth(res.data.token);
      //   useLocale.setLocale(form.lang);
      //   useLocale.setUserid(res.data.user_id);
      //   useLocale.setUserName(res.data.user_name);
      //   getDictionary()
      //   
      // }
    }
  });
};

  const getDictionary = async () => {
    let res = await $getDictionary();
    console.log(res);
    if (res.code == 0) {
      router.push("/");
      useLocale.setDictionary(res.data);
    }
  
};

function handleCommand(command: any) {
  currentLan.value = command.text;
  form.lang=command.value;
  useLocale.setLocale(command.value);
}
const updateImg = () => {};
const register = () => {};
</script>
<style lang="scss">
.myform .input .el-input__wrapper {
  border-radius: 20px;
}
.myform .lang .el-form-item__content{
    justify-content: end;
}
.bg-wrap .el-link {
  font-size: 12px;
  font-weight: normal;
}
</style>
<style lang="scss" scope>
.bg-wrap {
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 0;
  height: 100vh;
  background: url(../../assets/images/loginbg.jpg) no-repeat;
  background-size: cover;

  .el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .login-wrap {
    overflow: hidden;
    // height: 80vh;
    max-height: 80vh;
    min-width: 360px;
    background: #fff;
    display: flex;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    border-radius: 14px;

    .left {
      width: 360px;
      display: flex;
      flex-direction: column;
      align-content: stretch;

      .myform {
        flex-grow: 2;

        .btn {
          width: 100%;
          border-radius: 20px;
        }
      }

      .head {
        flex-grow: 0;
      }

      .foot {
        flex-grow: 0;
        height: 100px;
      }
    }

    .right {
      width: 480px;

      img {
        object-fit: cover;
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .bg-wrap {
  overflow: auto;
  position: static;
  right: auto;
  left: auto;
  height: auto;
  background: none;
  .login-wrap {
    overflow:auto;
     width: 100%;
     max-height:inherit;
    background: #fff;
    display: block;
    box-shadow: none;
    border-radius: 0;
    .left{
      width:100%;
    }
    .right{
      width:100%;
      img {
        width:100%;
      }
    }
    }
  }
}


</style>
